<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇 - Game Hub</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/game-detail.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <div class="nav-left">
                <div class="logo">
                    <span class="logo-text">Game Hub</span>
                </div>
                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="#">排行榜</a>
                    <a href="#">新品推荐</a>
                    <a href="#">收藏夹</a>
                </div>
            </div>
            <div class="nav-right">
                <div class="search-container">
                    <input type="text" placeholder="搜索游戏...">
                    <button class="search-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M21 21L16.5 16.5M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
                <button class="user-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        <path d="M20 21C20 18.2386 16.4183 16 12 16C7.58172 16 4 18.2386 4 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>
        </nav>
    </header>

    <main class="game-detail">
        <!-- 游戏头部信息 -->
        <section class="game-header">
            <div class="game-cover">
                <img src="https://via.placeholder.com/380x500" alt="贪吃蛇">
            </div>
            <div class="game-info">
                <h1 class="game-title">贪吃蛇</h1>
                <div class="game-meta">
                    <div class="game-rating">
                        <div class="rating-stars">
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                        </div>
                        <span class="rating-value">4.8</span>
                        <span class="rating-count">(1,234 个评分)</span>
                    </div>
                    <div class="game-categories">
                        <span class="category-tag">休闲</span>
                        <span class="category-tag">益智</span>
                        <span class="category-tag">经典</span>
                    </div>
                </div>
                <div class="game-actions">
                    <button class="play-button">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
                        </svg>
                        开始游戏
                    </button>
                    <button class="action-button">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                    <button class="action-button">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM15 8H9V6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8Z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                </div>
            </div>
        </section>

        <!-- 游戏内容区域 -->
        <div class="game-content">
            <!-- 主要内容 -->
            <div class="game-main">
                <section class="game-description">
                    <h2 class="section-title">游戏介绍</h2>
                    <p class="description-text">
                        贪吃蛇是一款经典的休闲游戏，玩家控制一条蛇在地图上移动，吃掉食物来增加长度。游戏难度会随着蛇的长度增加而提高，需要玩家具备良好的反应能力和策略思维。
                        <br><br>
                        游戏特色：
                        <br>• 经典玩法，简单易上手
                        <br>• 多种难度模式
                        <br>• 全球排行榜
                        <br>• 特殊道具系统
                        <br>• 成就系统
                    </p>
                </section>

                <section class="game-screenshots">
                    <h2 class="section-title">游戏截图</h2>
                    <div class="screenshots-grid">
                        <div class="screenshot">
                            <img src="https://via.placeholder.com/400x225" alt="游戏截图1">
                        </div>
                        <div class="screenshot">
                            <img src="https://via.placeholder.com/400x225" alt="游戏截图2">
                        </div>
                        <div class="screenshot">
                            <img src="https://via.placeholder.com/400x225" alt="游戏截图3">
                        </div>
                        <div class="screenshot">
                            <img src="https://via.placeholder.com/400x225" alt="游戏截图4">
                        </div>
                    </div>
                </section>
            </div>

            <!-- 侧边栏 -->
            <aside class="game-sidebar">
                <section class="sidebar-section">
                    <h2 class="section-title">游戏成就</h2>
                    <div class="achievement-list">
                        <div class="achievement-item">
                            <div class="achievement-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="achievement-info">
                                <h3 class="achievement-name">初出茅庐</h3>
                                <p class="achievement-desc">首次达到10分</p>
                            </div>
                        </div>
                        <div class="achievement-item">
                            <div class="achievement-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="achievement-info">
                                <h3 class="achievement-name">蛇王传说</h3>
                                <p class="achievement-desc">单局得分超过100分</p>
                            </div>
                        </div>
                        <div class="achievement-item">
                            <div class="achievement-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="achievement-info">
                                <h3 class="achievement-name">速度与激情</h3>
                                <p class="achievement-desc">在困难模式下获得50分</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sidebar-section">
                    <h2 class="section-title">排行榜</h2>
                    <div class="leaderboard-list">
                        <div class="leaderboard-item">
                            <span class="rank">1</span>
                            <div class="player-info">
                                <div class="player-avatar">
                                    <img src="https://via.placeholder.com/40" alt="玩家头像">
                                </div>
                                <span class="player-name">蛇王</span>
                            </div>
                            <span class="player-score">168分</span>
                        </div>
                        <div class="leaderboard-item">
                            <span class="rank">2</span>
                            <div class="player-info">
                                <div class="player-avatar">
                                    <img src="https://via.placeholder.com/40" alt="玩家头像">
                                </div>
                                <span class="player-name">追梦人</span>
                            </div>
                            <span class="player-score">156分</span>
                        </div>
                        <div class="leaderboard-item">
                            <span class="rank">3</span>
                            <div class="player-info">
                                <div class="player-avatar">
                                    <img src="https://via.placeholder.com/40" alt="玩家头像">
                                </div>
                                <span class="player-name">闪电侠</span>
                            </div>
                            <span class="player-score">145分</span>
                        </div>
                    </div>
                </section>
            </aside>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <div class="footer-brand">
                    <h3>Game Hub</h3>
                    <p>发现快乐，享受游戏</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>关于我们</h4>
                        <a href="#">公司介绍</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系方式</a>
                    </div>
                    <div class="footer-column">
                        <h4>帮助支持</h4>
                        <a href="#">常见问题</a>
                        <a href="#">用户指南</a>
                        <a href="#">意见反馈</a>
                    </div>
                    <div class="footer-column">
                        <h4>关注我们</h4>
                        <div class="social-links">
                            <a href="#" class="social-link">微信</a>
                            <a href="#" class="social-link">微博</a>
                            <a href="#" class="social-link">抖音</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Game Hub. All rights reserved.</p>
                <div class="footer-legal">
                    <a href="#">隐私政策</a>
                    <a href="#">用户协议</a>
                    <a href="#">免责声明</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 全屏模式 -->
    <div class="fullscreen-mode">
        <div class="fullscreen-header">
            <h2 class="game-title-small">贪吃蛇</h2>
            <button class="exit-fullscreen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M5 5h5v2H7v3H5V5zm14 0h-5v2h3v3h2V5zm0 14h-5v-2h3v-3h2v5zm-14 0h5v-2H7v-3H5v5z" fill="currentColor"/>
                </svg>
                退出全屏
            </button>
        </div>
        <div id="game-container"></div>
    </div>

    <!-- 截图查看器 -->
    <div class="screenshot-viewer">
        <div class="viewer-content">
            <img class="viewer-image" src="" alt="游戏截图">
            <button class="viewer-close">×</button>
        </div>
    </div>

    <script src="assets/js/game-detail.js"></script>
</body>
</html>
